<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
			<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<view class="body after-navber">
				<scroll-view class="group-top scroll-view-x" style="width: 100%" v-if="data.pt_url">
            <view class="flex-row flex-y-center" style="width: 100%">
                <navigator class="search-icon flex-grow-0 flex-y-center flex-x-center" openType="navigate" url="/pages/pt/search/search">
                    <image :src="data.__wxapp_img.dapp.search_index.url"></image>
                </navigator>
                <view style="height:48upx;border-right: 1upx solid #e2e2e2;"></view>
                <view class="flex-grow-1">
                    <scroll-view class="scroll-view-x" :scrollIntoView="data.toView" :scrollLeft="data.scrollLeft" scrollWithAnimation="true" scrollX="true" style="width:100%">
                        <view @tap="switchNav" :class="['scroll-view-item', data.cid==0?'active':'']" data-id="0" id="0">
                            热销
                        </view>
                        <view @tap="switchNav" :class="['scroll-view-item', data.cid==item.id?'active':'']" :data-id="item.id" :id="item.id" v-for="(item,index) in data.cat" :key="index">
                                {{item.name}}
                            </view>
                    </scroll-view>
                </view>
            </view>
        </scroll-view>
        <scroll-view scrollY @scrolltolower="pullDownLoading" :scrollIntoView="data.toView" :scrollTop="data.scrollTop" style="height: 100%;">
            <swiper autoplay="true" circular="true" class="banner" duration="300" indicatorActiveColor="#ff5c5c" indicatorDots="true" interval="5000" :style="data.pt_url?'':'margin-top:0upx'">
                <swiper-item v-for="(item,index) in data.banner" :key="item.id">
                    <form @submit="_formIdSubmit" data-type="navigate" :data-url="item.page_url" reportSubmit="true">
                        <button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
                            <view style="height:320upx">
                                <view class="slide-title">{{item.title}}</view>
                                <image class="slide-image" mode="aspectFill" :src="item.pic_url"></image>
                            </view>
                        </button>
                    </form>
                </swiper-item>
            </swiper>
        </scroll-view>
        <block v-if="data.ad&&data.ad.length>0">
            <view class="advert">
                <view class="division"></view>
								<component :is="'block-'+data.block.data.pic_list.length+'-0'" v-bind="{__wxapp_img:data.__wxapp_img,block:data.block,dapp:data.dapp}" @navigatorClick="navigatorClick"></component>
            </view>
        </block>
        <view class="division"></view>
        <form @submit="_formIdSubmit" data-type="navigate" :data-url="'/pages/pt/details/details?gid='+item.id" reportSubmit="true" v-for="(item,index) in data.goods" :key="item.id">
            <button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
                <view class="list-item flex-row">
                    <view class="flex-grow-0 corver-pic">
                        <image lazyLoad="true" :src="item.cover_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-col">
                        <view class="flex-grow-1 goods-title">
                                {{item.name}}
                            </view>
                        <view class="flex-grow-0 flex-row">
                            <view class="group-item" v-if="item.groupList[0]">
                                <view v-for="(group,i) in item.groupList" :key="i">
                                    <image :src="group.avatar_url"></image>
                                </view>
                            </view>
                            <view class="goods-sales">
                                    已团 {{item.virtual_sales}}
                                </view>
                        </view>
                        <view class="flex-grow-0 flex-row flex-y-bottom">
                            <view class="flex-grow-0 price flex-row flex-y-bottom">
                                <view class="unit flex-grow-0 flex-y-bottom">
                                        ¥
                                    </view>
                                <view class="flex-grow-1 flex-y-bottom">{{item.price}}</view>
                            </view>
                            <view class="flex-grow-1 old-price flex-y-bottom">
                                    ¥ {{item.original_price}}
                                </view>
                            <view class="flex-grow-0 group-btn flex-x-center flex-y-center">
                                    去开团
                                </view>
                        </view>
                    </view>
                </view>
            </button>
        </form>
        <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center;" :style="data.emptyGoods==1?'display:none':''">
            <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
        </view>
        <view class="empty-bar flex-row flex-x-center flex-y-center" v-if="data.is_show">
            没有更多商品了~
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	import getCoupon from '../../../components/common/get-coupon.vue'
	import block10 from '../../../components/template/index/block-1-0.vue'
	import block20 from '../../../components/template/index/block-2-0.vue'
	import block21 from '../../../components/template/index/block-2-1.vue'
	import block30 from '../../../components/template/index/block-3-0.vue'
	import block31 from '../../../components/template/index/block-3-1.vue'
	import block40 from '../../../components/template/index/block-4-0.vue'
	import block41 from '../../../components/template/index/block-4-1.vue'
	import block42 from '../../../components/template/index/block-4-2.vue'
	export default {
		components:{getCoupon,'block-1-0':block10,'block-2-0':block20,'block-2-1':block21,'block-3-0':block30,'block-3-1':block31,'block-4-0':block40,'block-4-1':block41,'block-4-2':block42},
		data() {
			return {
				data: {
        cid: 0,
        scrollLeft: 600,
        scrollTop: 0,
        emptyGoods: 0,
        page_count: 0,
        pt_url: !1,
        page: 1,
        is_show: 0,
				ad: undefined
    },
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a), this.systemInfo = myVue.getApp.core.getSystemInfoSync();
        var t = myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP);
        this.setData({
            dapp: t
        });
        var e = this;
        if (a.cid) {
            a.cid;
            return this.setData({
                pt_url: !1
            }), myVue.getApp.core.showLoading({
                title: "正在加载",
                mask: !0
            }), void myVue.getApp.request({
                url: myVue.getApp.api.group.index,
                method: "get",
                success: function(t) {
                    if (e.switchNav({
                        currentTarget: {
                            dataset: {
                                id: a.cid
                            }
                        }
                    }), 0 == t.code) {
                        var o = {
                            data: {
                                pic_list: t.data.ad
                            }
                        };
                        e.setData({
                            banner: t.data.banner,
                            ad: t.data.ad,
                            page: t.data.goods.page,
                            page_count: t.data.goods.page_count,
                            block: o
                        });
                    }
                }
            });
        }
        this.setData({
            pt_url: !0
        }), this.loadIndexInfo(this);
    },
    onReady: function(a) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(a) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(a) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(a) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(a) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(a) {
        myVue.getApp.page.onReachBottom(this);
        var t = this;
        t.setData({
            show_loading_bar: 1
        }), t.data.page < t.data.page_count ? (t.setData({
            page: t.data.page + 1
        }), t.getGoods(t)) : t.setData({
            is_show: 1,
            emptyGoods: 1,
            show_loading_bar: 0
        });
    },
		onShareAppMessage: function() {
		    return myVue.getApp.page.onShareAppMessage(this), {
		        path: "/pages/pt/index/index?user_id=" + this.data.__user_info.id,
		        success: function(a) {}
		    };
		},
		methods: {
			loadIndexInfo: function(a) {
        var t = a,_this = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.index,
            method: "get",
            data: {
                page: t.data.page
            },
            success: function(a) {
                if (0 == a.code) {
                    myVue.getApp.core.hideLoading();
                    var e = {
                        data: {
                            pic_list: a.data.ad
                        }
                    };
                    t.setData({
                        cat: a.data.cat,
                        banner: a.data.banner,
                        ad: a.data.ad,
                        goods: a.data.goods.list,
                        page: a.data.goods.page,
                        page_count: a.data.goods.page_count,
                        block: e
                    }), a.data.goods.row_count <= 0 && t.setData({
                        emptyGoods: 1
                    });
                }
            }
        });
    },
    getGoods: function(a) {
        var t = a,_this = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.list,
            method: "get",
            data: {
                page: t.data.page,
                cid: t.data.cid
            },
            success: function(a) {
                0 == a.code && (myVue.getApp.core.hideLoading(), t.data.goods = t.data.goods.concat(a.data.list), 
                t.setData({
                    goods: t.data.goods,
                    page: a.data.page,
                    page_count: a.data.page_count,
                    show_loading_bar: 0
                }));
            }
        });
    },
    switchNav: function(a) {
        var t = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var e = a.currentTarget.dataset.id;
        if (t.setData({
            cid: e
        }), "undefined" == typeof my) {
            var o = this.systemInfo.windowWidth, d = a.currentTarget.offsetLeft, p = this.data.scrollLeft;
            p = d > o / 2 ? d : 0, t.setData({
                scrollLeft: p
            });
        } else {
            for (var s = t.data.cat, n = !0, g = 0; g < s.length; ++g) if (s[g].id === a.currentTarget.id) {
                n = !1, g >= 1 ? t.setData({
                    toView: s[g - 1].id
                }) : t.setData({
                    toView: "0"
                });
                break;
            }
            n && t.setData({
                toView: "0"
            });
        }
        t.setData({
            cid: e,
            page: 1,
            scrollTop: 0,
            emptyGoods: 0,
            goods: [],
            show_loading_bar: 1,
            is_show: 0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.list,
            method: "get",
            data: {
                cid: e
            },
            success: function(a) {
                if (t.getApp.core.hideLoading(), 0 == a.code) {
                    var e = a.data.list;
                    a.data.page_count >= a.data.page ? t.setData({
                        goods: e,
                        page: a.data.page,
                        page_count: a.data.page_count,
                        row_count: a.data.row_count,
                        show_loading_bar: 0
                    }) : t.setData({
                        emptyGoods: 1
                    });
                }
            }
        });
    },
    pullDownLoading: function(a) {
        var t = this;
        if (1 != t.data.emptyGoods && 1 != t.data.show_loading_bar) {
            t.setData({
                show_loading_bar: 1
            });
            var e = parseInt(t.data.page + 1), o = t.data.cid;
            myVue.getApp.request({
                url: myVue.getApp.api.group.list,
                method: "get",
                data: {
                    page: e,
                    cid: o
                },
                success: function(a) {
                    if (0 == a.code) {
                        var e = t.data.goods;
                        a.data.page > t.data.page && Array.prototype.push.apply(e, a.data.list), a.data.page_count >= a.data.page ? t.setData({
                            goods: e,
                            page: a.data.page,
                            page_count: a.data.page_count,
                            row_count: a.data.row_count,
                            show_loading_bar: 0
                        }) : t.setData({
                            emptyGoods: 1
                        });
                    }
                }
            });
        }
    },
    navigatorClick: function(a) {
        var t = a.currentTarget.dataset.open_type, e = a.currentTarget.dataset.url;
        return "wxapp" != t || (e = function(a) {
            var t = /([^&=]+)=([\w\W]*?)(&|$|#)/g, e = /^[^\?]+\?([\w\W]+)$/.exec(a), o = {};
            if (e && e[1]) for (var d, p = e[1]; null != (d = t.exec(p)); ) o[d[1]] = d[2];
            return o;
        }(e), e.path = e.path ? decodeURIComponent(e.path) : "", myVue.getApp.core.navigateToMiniProgram({
            appId: e.appId,
            path: e.path,
            complete: function(a) {}
        }), !1);
    },
    to_dial: function() {
        var a = this.data.dapp.contact_tel;
        myVue.getApp.core.makePhoneCall({
            phoneNumber: a
        });
    },
		},
	}
</script>

<style scoped>

page {
    background: #ffffff;
}

.search-icon image {
    width: 68upx;
    height: 68upx;
}

.search-icon {
    height: 92upx;
    padding: 0 24upx;
}

.scroll-view-x {
    background-color: #fff;
    white-space: nowrap;
    position: fixed;
    top: var(--window-top);
    z-index: 99;
    border-bottom: 1upx solid #e2e2e2;
    height: 92upx;
    padding-right: 140upx;
}

.scroll-view-x .scroll-view-item {
    display: inline-block;
    margin: 16upx 0upx 16upx 36upx;
    padding: 0 24upx;
    font-size: 12pt;
    color: #666666;
    height: 60upx;
    line-height: 60upx;
    white-space: nowrap;
}

.scroll-view-y {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

swiper {
    height: 304upx;
}

.scroll-view-x .active {
    color: #fff;
    border-radius: 30upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
    height: 60upx;
}

.banner {
    height: 320upx;
    margin-top: 92upx;
}

.banner navigator {
    font-size: 0;
    position: relative;
    height: 100%;
}

.banner .slide-image {
    width: 100%;
    height: 100%;
}

.banner .slide-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 20upx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 11pt;
    display: none;
}

.advert {
    background: #f7f7f7;
}

.division {
    height: 15upx;
    background-color: #f7f7f7;
}

.list-item {
    padding: 24upx;
    border-bottom: 1upx solid #e2e2e2;
}

.list-item .corver-pic image {
    width: 220upx;
    height: 220upx;
    border-radius: 5upx;
    margin-right: 24upx;
}

.goods-title {
    color: #353535;
    font-size: 11pt;
}

.list-item .group-item image {
    width: 34upx;
    height: 34upx;
    border: 1upx solid #ffffff;
    border-radius: 17upx;
}

.list-item .group-item view {
    float: left;
    width: 24upx;
}

.group-item {
    margin-right: 12upx;
}

.goods-sales {
    font-size: 10pt;
    color: #ff5c5c;
}

.list-item .price {
    color: #ff5c5c;
    font-size: 14pt;
    margin-right: 16upx;
    line-height: 1;
}

.list-item .price .unit {
    font-size: 9pt;
}

.list-item .old-price {
    font-size: 10pt;
    color: #919191;
    text-decoration: line-through;
    line-height: 1;
}

.list-item .group-btn {
    height: 66upx;
    width: 180upx;
    color: #ffffff;
    font-size: 12pt;
    border-radius: 10upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active,empty-bar {
    visibility: visible;
}

.empty-bar {
    height: 80upx;
    color: #919191;
}

.new-group {
    border-radius: 30upx;
    z-index: 9999;
    position: absolute;
    top: 120upx;
    left: 24upx;
}

.new-group-info {
    color: #ffffff;
    font-size: 9pt;
}

.new-group-bg {
    background-color: #000000;
    opacity: 0.5;
    width: 100%;
    position: absolute;
    height: 100%;
    border-radius: 30upx;
    float: left;
    z-index: -1;
}

.new-group .new-group-info image {
    height: 60upx;
    width: 60upx;
    border-radius: 30upx;
    margin-right: 10upx;
}

.group-info-text {
    height: 60upx;
    margin-right: 22upx;
    line-height: 1;
}
</style>
